<template>
  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
    <path d="M1 18 H8 L20 8 L20 40 L8 30 H1 Z" />
    <path v-if="volume > 0 && !muted" :class="{ volume: volume <= 0 }" d="M26 16 A90 30 0 0 1 26 32" />
    <path v-if="volume > 0 && !muted" :class="{ volume: volume <= 33 }" d="M33 10 A45 30 0 0 1 33 38" />
    <path v-if="volume > 0 && !muted" :class="{ volume: volume <= 65 }" d="M39 4 A30 30 0 0 1 39 44" />
    <path v-if="volume === 0 || muted" class="muted" d="M28 16 L44 32" />
    <path v-if="volume === 0 || muted" class="muted" d="M44 16 L28 32" />
  </svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'

export default defineComponent({
  name: 'VoiceIcon',
  props: {
    muted: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    volume: {
      type: Number as PropType<number>,
      required: true
    }
  },
  emits: ['update:modelValue']
})
</script>

<style scoped lang="scss">
svg {
  path {
    stroke: var(--task-bar-color);
    stroke-width: 4px;
    fill: none;

    &.muted {
      stroke-width: 3px;
    }

    &.volume {
      stroke: rgba(255, 255, 255, 0.3);
    }
  }
}
</style>
